<template>
  <header class="bg-white shadow-sm">
    <!-- 顶部导航 -->
    <div class="bg-gray-50 border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-10 items-center">
          <div class="flex items-center space-x-5">
            <span class="font-bold text-gray-900 hover:text-primary transition-custom">网易首页</span>
            <div class="flex items-center space-x-1 cursor-pointer text-gray-600 hover:text-gray-900 transition-custom">
              <span>应用</span>
              <span class="text-xs">▼</span>
            </div>
            <span class="text-xs text-gray-600 hover:text-gray-900 transition-custom">无障碍浏览</span>
          </div>
          <div class="flex items-center space-x-4">
            <div class="hidden sm:flex items-center space-x-1 cursor-pointer text-gray-600 hover:text-gray-900 transition-custom">
              <span>公开课</span>
              <span class="text-xs">▼</span>
            </div>
            <div class="hidden sm:flex items-center space-x-1 cursor-pointer text-gray-600 hover:text-gray-900 transition-custom">
              <span>严选</span>
              <span class="text-xs">▼</span>
            </div>
            <div class="hidden sm:flex items-center space-x-1 cursor-pointer text-gray-600 hover:text-gray-900 transition-custom">
              <span>¥</span>
              <span class="text-xs">▼</span>
            </div>
            <span class="text-gray-600 hover:text-gray-900 cursor-pointer transition-custom">✉</span>
            <button class="bg-danger text-white px-4 py-1.5 rounded text-sm font-medium hover:bg-danger/90 transition-custom">登录</button>
            <div class="hidden sm:flex items-center space-x-1 cursor-pointer text-gray-600 hover:text-gray-900 transition-custom">
              <span class="text-xs">注册免费邮箱</span>
              <span class="text-xs">▼</span>
            </div>
            <span class="text-gray-600 hover:text-gray-900 cursor-pointer transition-custom sm:hidden">☰</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主导航 -->
    <nav class="bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center h-12 overflow-x-auto whitespace-nowrap hide-scrollbar">
          <ul class="flex space-x-6">
            <li><a href="#" class="text-danger font-medium relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-danger">新闻</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">体育</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">NBA</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">娱乐</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">音乐</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">游戏</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">财经</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">股票</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">汽车</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">科技</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">手机</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">智能</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">家电</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">时尚</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">直播</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">文化</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">旅游</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">房产</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">家居</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">教育</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">青岛</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">健康</a></li>
            <li><a href="#" class="text-gray-700 hover:text-danger transition-custom relative group after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-danger after:transition-all after:duration-300 group-hover:after:w-full">艺术</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
/* 隐藏滚动条但保留功能 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
</style>

